<template>
  <div class="table-block">
    <div class="table-block-list" ref="tableRef">
      <div
        v-for="item in unref(columnArr)"
        :key="item.fixed"
        class="table-block-list-content"
        :class="[item.shadow && `content-${item.fixed}`]"
        :style="{
          width: item.width
        }"
      >
        <tableTitle 
          v-if="showTitle" 
          v-bind="$attrs" 
          :columns="item.titleList" 
          :rowWidth="item.colWidth"
          :fixedCol="item.fixed"
          :isXScroll="isXScroll"
          :id="item.fixed === 'center' ? rowTitleId : ''"
          @scroll="e => onscrollHandler(e, rowListId)"
        > 
           <template v-for="ite in item.headerSlots" #[ite.slotHeader]="{ titleItem }">
            <slot :name="ite.slotHeader" :titleItem="titleItem"> </slot>
          </template>
        </tableTitle>
        <list
          v-if="showList && data.length > 0"
          v-bind="$attrs"
          :columns="item.titleList"
          :data="data"
          :rowWidth="item.colWidth"
          :fixedCol="item.fixed"
          :isXScroll="isXScroll"
          :id="item.fixed === 'center' ? rowListId : ''"
          @scroll="e => onscrollHandler(e, rowTitleId)"
        >
        </list>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, unref, onMounted, nextTick, useSlots } from 'vue'
import tableTitle from './title.vue'
import list from './list.vue'
import { useDesign } from '@/hooks/useDesign.ts'
const props = defineProps({
  // 展示的列
  columns: {
    type: Array,
    default: () => []
  },
  // 源数据
  data: {
    type: Array,
    default: () => []
  },
  // 是否显示标题头
  showTitle: {
    type: Boolean,
    default: true
  },
  // 是否显示列表数据
  showList: {
    type: Boolean,
    default: true
  }
})
const tableRef = ref(null)
const fixedWidthDefault = ref(70) // 单元格默认宽度
const { 
  isXScroll
} = useDesign(tableRef, props.columns, fixedWidthDefault)

// 获取列宽和
function getColWidth(arr: Array, defaultWidth: Number): Number {
  return +arr
    .reduce((pre, cur) => {
      pre += cur.width ? +cur.width : defaultWidth
      return pre
    }, 0)
    .toFixed(2)
}

const rowTitleId = ref('rowTitle' + Math.ceil(Math.random() * 10 ** 10))
const rowListId = ref('rowList' + Math.ceil(Math.random() * 10 ** 10))
// title和list同步滚动
const onscrollHandler = function(e: HTMLElement, id: Number) {
  const dom = document.querySelector(`#${id}`)
  // console.log('onscrollHandler===>', e, dom)
  if (dom) {
    dom.scrollLeft = e?.target?.scrollLeft
  }
}
// 表头数据
function getColumnArr(list: Array): Array {
  return list.reduce((pre, cur) => {
    pre.push(cur)
    return pre
  }, [])
}

const slots = useSlots()
// 获取title 插槽
function getHeaderSlots(arr: Array) {
  console.log('slots===>', arr, slots)
  return arr.filter(item => item.slotHeader && slots[item.slotHeader])
}
// 列list
const fixedArr = ['left', 'center', 'right']
const columnArr = computed(() => {
  let obj = fixedArr.reduce((pre, key) => {
    pre[key] = []
    return pre
  }, {})
  props.columns.forEach((item, index) => {
    // fixed 值为 String
    if (item.fixed === 'left' || item.fixed === 'right') {
      obj[item.fixed].push(item)
    } else {
      obj.center.push(item)
    }
  })
  const wt = fixedArr.reduce((pre, key) => {
    pre[key] = getColWidth(obj[key], fixedWidthDefault.value)
    return pre
  }, {})
  const arr = []
  Object.keys(obj).forEach(key => {
    if (obj[key].length > 0) {
      arr.push({
        titleList: obj[key],
        fixed: key,
        colWidth: wt[key], // 列宽度
        // 此处宽度需动态计算,屏幕宽度不一样对应的1rem等于多少px不一样
        width: ['left', 'right'].includes(key) ? wt[key] + 'px' : `calc(100% - ${wt.left + wt.right}px)`,
        headerSlots: getHeaderSlots(obj[key]),
        shadow: key !== 'center' ? isXScroll : false
      })
    }
  })
  // 最后一列添加类名
  const obje = arr[arr.length - 1]
  const setLastCol = function(colArr: Array) {
    colArr.forEach((item, index) => {
      if (colArr.length - 1 === index) {
        item.isLastCol = true
      }
    })
  }
  if (obje) {
    setLastCol(obje.titleList)
  }
  return arr
})

console.log('columnArr===>', unref(columnArr))
</script>
<style lang="less" scoped>
.table-block {
  width: 100%;
  max-width: 100%;
  .table-block-list {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    display: flex;
    justify-content: flex-start;
    &-content {
      position: relative;
      &.content-left::before,
      &.content-right::before {
        content: '';
        position: absolute;
        width: 8px;
        height: 100%;
        top: 0;
        bottom: 0;
        right: -7px;
        background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #f1f1f1 100%);
        z-index: 80;
      }
      &.content-right::before {
        left: -1px;
      }
    }
  }
}
</style>
